<template>
	<view class="container">
		<view class="neirong" @click="QuestionDetails(item)" v-for="item in listData" :key="item.title">
			<view class="box_bt">{{ item.title }}</view>
			<view class="qqjieda">
				请求解答： <text>@{{ item.name }}</text>
			</view>
			<view class="date">
				<view class="date_dxh">
					<view class="data_shij">
						提问时间：
						<text>{{ item.date }}</text>
					</view>
					<view class="pinglun">
						{{ item.message }}
					</view>
				</view>
			</view>
			<view class="divider"></view>
			<view class="toux">
				<view class="toux-content" style="display: flex;">
					<view class="avatar"></view>
					<view class="box_name">
						<view class="mingchengBQ">
							<view class="name_mc">{{ item.name }}</view>
							<view class="Departmentlabel">{{ item.department }}</view>
						</view>
						<view class="gongSmc">{{ item.corporatename }}</view>
					</view>
				</view>
				<view class="status">未解决</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// import {
	// 	defineProps
	// } from 'vue';
	// import {
	// 	navigateTo
	// } from '@dcloudio/uni-app';

	// 接收父组件传递的数据
	const props = defineProps({
		listData: {
			type: Array,
			required: true
		}
	});

	// 处理问题详情的跳转方法
	const QuestionDetails = (item) => {
		console.log("item", item);
		navigateTo({
			url: `/pages/QuestionDetails/QuestionDetails?item=${JSON.stringify(item)}`
		});
	};
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}

	.neirong {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx 30rpx;
		margin-top: 25rpx;
	}

	.box_bt {
		font-weight: bold;
		font-size: 32rpx;
		color: #222222;
	}

	.qqjieda {
		font-weight: 400;
		font-size: 24rpx;
		color: #4170FF;
		margin: 18rpx 0;
	}

	.data_shij {
		font-weight: 400;
		font-size: 20rpx;
		color: #999999;
	}

	.pinglun {
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
	}

	.date_dxh {
		display: flex;
		justify-content: space-between;
	}

	.divider {
		height: 3rpx;
		width: 100%;
		background: #ccc;
		margin: 16rpx 0;
	}

	.toux {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.toux-content {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: blue;
	}

	.box_name {
		margin-left: 10rpx;
	}

	.Departmentlabel {
		width: 80rpx;
		height: 30rpx;
		background: #EBF0FF;
		border-radius: 15rpx;
		font-weight: 400;
		font-size: 18rpx;
		color: #4170FF;
		text-align: center;
		line-height: 30rpx;
		margin-left: 12rpx;
	}

	.mingchengBQ {
		display: flex;
		align-items: center;
	}

	.name_mc {
		font-weight: bold;
		font-size: 24rpx;
		color: #222222;
	}

	.gongSmc {
		font-weight: 400;
		font-size: 20rpx;
		color: #999999;
		margin-top: 5rpx;
	}

	.status {
		font-weight: 400;
		font-size: 20rpx;
		color: #4CAF50;
	}
</style>